<template>
    <div class="baoban-container">
        <!-- 班次调度-报班 -->
        <div class="top-container">
            <ul class="form-container">
                <li>
                   <el-form ref="form" label-width="50px" size="mini">
                        <el-form-item label="路线">
                            <el-col :span="24">
                                <el-input v-model="roadFrom" style="width:100% !important" :disabled="true"></el-input>
                            </el-col>
                        </el-form-item>
                         <el-form-item label="时间">
                            <el-col :span="24">
                            <el-time-picker type="time" v-model="dateFrom" style="width: 100%;" :disabled="true"></el-time-picker>
                            </el-col>
                        </el-form-item>
                          <el-form-item label="已售">
                            <el-col :span="8">
                            <el-input v-model="selled" style="width: 100%;" :disabled="true"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="余座">
                            <el-col :span="8">
                            <el-input v-model="seat" style="width: 100%;" :disabled="true"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </li>
                <li>
                    <el-form ref="form" label-width="80px" size="mini">
                        <el-form-item label="班次号">
                            <el-input v-model="carNum"></el-input>
                        </el-form-item> 
                        <el-form-item label="报班车牌">
                            <el-autocomplete v-model="carNow" :fetch-suggestions="querySearchCarNum" @blur="checkCarNow"></el-autocomplete>
                        </el-form-item> 
                        <el-form-item label="顶班车牌">
                            <el-autocomplete v-model="carReplace" :fetch-suggestions="querySearchCarNum" @blur="checkCarNow"></el-autocomplete>
                        </el-form-item> 
                    </el-form>
                </li>
                <li>
                    <el-form ref="form" label-width="80px" size="mini">
                        <el-form-item label="驾驶员1">
                            <el-autocomplete v-model="driver1" :fetch-suggestions="querySearchDriver"></el-autocomplete>
                        </el-form-item> 
                        <el-form-item label="驾驶员2">
                            <el-autocomplete v-model="driver2" :fetch-suggestions="querySearchDriver"></el-autocomplete>
                        </el-form-item> 
                        <el-form-item label="驾驶员3">
                            <el-autocomplete v-model="driver3" :fetch-suggestions="querySearchDriver"></el-autocomplete>
                        </el-form-item> 
                    </el-form> 
                </li>
                <li>
                    <el-form ref="form" label-width="60px" size="mini">
                        <el-form-item label="检票口">
                            <el-input v-model="checkWindow"></el-input>
                        </el-form-item> 
                        <el-form-item label="卡位">
                            <el-input v-model="position"></el-input>
                        </el-form-item> 
                    </el-form> 
                </li>
                <li class="last">
                    <div class="check-list">
                        <div class="check-title">没有安检记录</div>
                        <p>最后一次安检记录（{{lastTime}}）</p>
                        <p>时间:{{checkTime}}</p>
                        <p>地点:{{checkPlace}}</p>
                        <p>结果:{{checkResult}}</p>
                    </div>
                </li>
            </ul>
            <!-- 报班按钮 -->
            <button class="baoban-btn" @click="sendC"><img src="../../assets/imgs/operation_btn_icon_bianji_default.png" alt="" class="btn-img">
            报班</button>
        </div>
        <div class="bottom-container">
            <el-row>
                <el-col :span="24" class="choose-container">
                    <el-form ref="form" label-width="5%">
                        <el-col :span="4">
                              <el-form-item label="">
                                <!-- <el-col :span="11"> -->
                                <el-date-picker type="date" placeholder="选择日期" v-model="checkDate" style="width: 100%;" size="mini"></el-date-picker>
                                <!-- </el-col> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="线路" label-width="50px">
                                <el-autocomplete v-model="road" placeholder="" size="mini" :fetch-suggestions="querySearchRoad"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="到站" label-width="50px">
                                <el-autocomplete v-model="roadEnd" placeholder="" size="mini" :fetch-suggestions="querySearchRoadEnd"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="运营单位" label-width="100px">
                                <el-autocomplete v-model="comp" placeholder="" size="mini" :fetch-suggestions="querySearchComp"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <button class="check-btn rf" @click="reset"><img src="../../assets/imgs/operation_btn_icon_chongzhi_default.png" alt="" class="btn-img">
                    重置</button>
                    <button class="check-btn rf" @click="choose"><img src="../../assets/imgs/xoperation_btn_icon_saixuan_default.png" alt="" class="btn-img">
                    筛选</button>
                </el-col>
            </el-row>
            <div>
                <el-row class="check-list-container">
                    <el-col :span="24">
                        <div class="hour-text">一小时内班次</div>
                          <el-radio-group v-model="checkChoose" class="check-container">
                            <el-radio :label="1">全部</el-radio>
                            <el-radio :label="2">售票</el-radio>
                            <el-radio :label="3">报班</el-radio>
                            <el-radio :label="4">停班</el-radio>
                            <el-radio :label="5">发班</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>
            <!-- 数据表格 -->
            <el-row>
                <el-col :span="24">
                  <avue-crud :data="carTable[0].data" :option="carTable[0].option" @current-row-change="rowChange" :page="carTable[0].page" @current-change="currentChange"  @size-change="sizeChange"></avue-crud>
                </el-col>
            </el-row>
        </div>
      <div class="right-menu">
        <ul>
          <li>{{rightLineName}}</li>
          <li @click="rightSend">报班</li>
          <li @click="rightDes">销班</li>
          <li @click="rightStop">停班</li>
          <li @click="rightStart">开班</li>
          <li>打印行车路单</li>
        </ul>
      </div>
    </div>
</template>

<script>
import "../../assets/js/jquery.js";
import TableData from "../../components/common/tableData";
import qs from "qs";
import "../../assets/js/mouse.js";
export default {
  data: function() {
    return {
      activeTag: "1-1",
      roadFrom: "",
      roadTo: "",
      dateFrom: "",
      dateTo: "",
      selled: "",
      seat: "",
      carNum: "",
      carNumList: [],
      carNow: "",
      carReplace: "",
      driver1: "",
      driver2: "",
      driver3: "",
      driverList: [],
      checkWindow: "",
      position: "",
      checkDate: "",
      road: "",
      roadList: [],
      roadEnd: "",
      roadEndList: [],
      comp: "",
      compList: [],
      checkChoose: 1,
      carTable: [
        {
          page: {
            pageSizes: [10, 30, 100, 500],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: [
              {
                label: "线路",
                prop: "line_name"
              },
              {
                label: "班次号",
                prop: "bus_id"
              },
              {
                label: "时间",
                prop: "bus_time"
              },
              {
                label: "状态",
                prop: "status_id",
                formatter: function(row, value, label, column) {
                  switch (row.status_id) {
                    case 1:
                      return "售票";
                      break;
                    case 2:
                      return "停班";
                      break;
                    case 3:
                      return "报班";
                      break;
                    case 4:
                      return "发班";
                      break;
                  }
                }
              },
              {
                label: "运营单位",
                prop: "customer_name"
              },
              {
                label: "报班车牌",
                prop: "baoban_vehi_no"
              },
              {
                label: "报班时间",
                prop: "baoban_time",
                formatter: function(row, value, label, column) {
                  if (row.baoban_time != null) {
                    return row.baoban_time.slice(11);
                  }
                }
              },
              {
                label: "可售",
                prop: "cansalecount"
              },
              {
                label: "共售",
                prop: "salecount",
                formatter: function(row, value, label, column) {
                  if (row.salecount == 0) {
                    return 0;
                  } else {
                    return row.salecount;
                  }
                }
              },
              {
                label: "本站",
                prop: "salecount_owner_org",
                formatter: function(row, value, label, column) {
                  if (row.salecount_owner_org == 0) {
                    return 0;
                  } else {
                    return row.salecount_owner_org;
                  }
                }
              },
              {
                label: "余座",
                prop: "end_seat"
              },
              {
                label: "检票口",
                prop: "checkdoor"
              },
              {
                label: "卡位",
                prop: "kawei"
              },
              {
                label: "报班驾驶员",
                prop: "planed_driver_1"
              }
            ],
            highlightCurrentRow: true
          }
        }
      ],
      pageSize: 1,
      pageNum: 1,
      totalPage: 5,
      checkRoadID: "",
      checkEndID: "",
      checkCompID: "",
      lastTime: "",
      checkTime: "",
      checkPlace: "",
      checkResult: "",
      currentRow: "",
      rightLineName: "请选择班次",
      busDate: "",
      carMsg: {},
      sid: ""
    };
  },
  methods: {
    // 车牌自动补全
    querySearchCarNum(queryString, cb) {
      var arr = this.carNumList;
      var results = queryString
        ? arr.filter(this.createFilter(queryString))
        : arr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 驾驶员自动补全
    querySearchDriver(queryString, cb) {
      var arr = this.driverList;
      var results = queryString
        ? arr.filter(this.createFilter(queryString))
        : arr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //线路自动补全
    querySearchRoad(queryString, cb) {
      var arr = this.roadList;
      var results = queryString
        ? arr.filter(this.createFilter(queryString))
        : arr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //站点自动补全
    querySearchRoadEnd(queryString, cb) {
      var arr = this.roadEndList;
      var results = queryString
        ? arr.filter(this.createFilter(queryString))
        : arr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //营运单位自动补全
    querySearchComp(queryString, cb) {
      var arr = this.compList;
      var results = queryString
        ? arr.filter(this.createFilter(queryString))
        : arr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return arr => {
        return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    //报班车牌请求
    loadCarNum() {
      var arr = [];
      this.postRequest("/sch/data/bus_vehicle/listWithSpell").then(data => {
        for (var c of data.data) {
          // var i = 0;
          arr.push({ value: c.vehi_no });
          // $("el-autocomplete-6778-item-" + i).addClass("autoItem");
          // i++;
        }
      });
      return arr;
    },
    //驾驶员请求
    loadDriver() {
      var arr = [];
      this.postRequest("/sch/data/driver/listWithSpell").then(data => {
        for (var d of data.data) {
          arr.push({ value: d.name });
        }
      });
      return arr;
    },
    //线路请求
    loadRoad() {
      var arr = [];
      this.postRequest("/sch/data/line/listWithSpell").then(data => {
        for (var r of data.data) {
          arr.push({ value: r.name, prop: r.id });
        }
      });
      return arr;
    },
    //站点请求
    loadRoadEnd() {
      var arr = [];
      this.postRequest("/sch/data/station/listWithSpell").then(data => {
        for (var e of data.data) {
          arr.push({ value: e.name, prop: e.id });
        }
      });
      return arr;
    },
    //营运单位请求
    loadComp() {
      var arr = [];
      this.postRequest("/sch/data/bus_company/listWithSpell").then(data => {
        for (var c of data.data) {
          arr.push({ value: c.name, prop: c.id });
        }
      });
      return arr;
    },
    sizeChange(val) {
      this.carTable[0].page.pageSize = val;
      this.allList();
    },
    // 全部列表请求
    allList() {
      this.postRequest("/sch/bus/plan/list", {
        filterRules: JSON.stringify([
          { field: "bus_plan.bus_date", op: "eq", value:this.dateToString(this.checkDate) },
          { field: "bus_plan.line_id", op: "eq", value: this.checkRoadID },
          { field: "bus_plan_price.st_id", op: "eq", value: this.checkEndID },
          { field: "bus_plan.customer_id", op: "eq", value: this.checkCompID },
          { field: "bus_plan.status_id", op: "eq", value: this.sid }
        ]),
        page: this.carTable[0].page.currentPage,
        rows: this.carTable[0].page.pageSize
      }).then(data => {
        console.log(data);
        this.carTable[0].data = data.data.list;
        this.carTable[0].page.total = data.data.totalRow;
      });
    },
    currentChange(val) {
      this.carTable[0].page.currentPage = val;
      this.allList();
    },
    //报班请求
    sendC() {
      this.getRequest(
        "/sch/bus/plan/doBaoban?bus_plan_id=" +
        this.carNum +
        "&bus_date=" +
        this.lastTime.slice(0,12) +
        "&vehino=" +
        this.carNow +
        "&baobanVehino=" +
        this.carReplace
          ? this.carReplace
          : "" +
            "&driver_ids=&vehi_sc_no=&doLineCheck=&baoban_checkdoor=" +
            this.checkWindow +
            "&baoban_kawei=" +
            this.position +
            "&doAdmissionCheck=&inbound_people_count="
      ).then(data => {
        console.log(1);
        this.msgShow(data, function() {});
      });
    },
    //检查报班车牌
    checkCarNow() {
      this.lastTime = "";
      this.checkTime = "";
      this.checkPlace = "";
      this.checkResult = "";
      this.getRequest(
        "/securitycheck/vehi/latestLog?vehino=" + this.carNow
      ).then(data => {
        if (data.data[1] == null) {
          this.$message.error("车牌号有误!请检查!");
        } else {
          this.lastTime = data.data[1].duration_str;
          this.checkTime = data.data[1].sc_time;
          this.checkPlace = data.data[1].anjian_org_name;
          this.checkResult = data.data[1].is_pass ? "合格" : "不合格";
        }
      });
    },
    // 筛选
    choose() {
      this.allList();
    },
    reset() {
      (this.checkDate = ""),
        (this.road = ""),
        (this.roadEnd = ""),
        (this.sid = "");
      this.comp = "";
      this.allList();
    },

    // 右键
    // 右键报班
    rightSend() {
      this.getRequest(
        "/sch/bus/plan/doBaoban?bus_plan_id=" +
          this.currentRow +
          "&bus_date=" +
          this.busDate +
          "&vehino=" +
          this.carMsg.baoban_vehi_no +
          "&baobanVehino=" +
          this.carMsg.baoban_vehi_no?this.carMsg.baoban_vehi_no:"" +
          "&driver_ids=&vehi_sc_no=&doLineCheck=&baoban_checkdoor=&baoban_kawei=&doAdmissionCheck=&inbound_people_count="
      ).then(data => {
        this.msgShow(data, function() {});
      });
    },
    // 右键销班
    rightDes() {
      this.getRequest(
        "/sch/bus/plan/doXiaoban?bus_plan_id=" + this.currentRow
      ).then(data => {
        if (data.data[0] == "-1") {
          this.$message.error(data.data[1]);
        } else {
          this.$message({
            message: data.data[1],
            type: "success"
          });
        }
      });
    },
    // 右键停班
    rightStop() {
      this.getRequest(
        "/sch/bus/plan/doTingban?bus_plan_id=" + this.currentRow
      ).then(data => {
        if (data.data[0] == "-1") {
          this.$message.error(data.data[1]);
        } else {
          this.$message({
            message: data.data[1],
            type: "success"
          });
        }
      });
    },
    // 右键开班
    rightStart() {
      this.getRequest(
        "/sch/bus/plan/doKaiban?bus_plan_id=" + this.currentRow
      ).then(data => {
        if (data.data[0] == "-1") {
          this.$message.error(data.data[1]);
        } else {
          this.$message({
            message: data.data[1],
            type: "success"
          });
        }
      });
    },
    rowChange(val) {
      console.log(val);
      this.carMsg = val;
      this.currentRow = val.id;
      this.rightLineName = val.line_name;
      this.busDate = val.bus_date;
      this.roadFrom = val.line_name;
      this.roadTo = val.end_station;
      this.dateFrom = val.bus_time;
      this.dataTo = val.bus_time;
      this.selled = val.salecount;
      this.seat = val.cansalecount;
      this.carNum = val.id;
      this.carNow = val.baoban_vehi_no;
      this.carReplace = val.vehi_no;
      this.driver1 = val.planed_driver_1;
      this.driver2 = val.planed_driver_2;
      this.driver3 = val.planed_driver_3;
      this.checkWindow = val.checkdoor;
      this.position = val.kawei;
    }
  },
  computed: {},
  components: { TableData },
  watch: {
    checkChoose() {
      switch (this.checkChoose) {
        case 1:
          this.sid = "";
          this.allList();
          break;
        case 2:
          this.sid = 1;
          this.allList();
          break;
        case 3:
          this.sid = 3;
          this.allList();
          break;
        case 4:
          this.sid = 2;
          this.allList();
          break;
        case 5:
          this.sid = 4;
          this.allList();
          break;
      }
    },
    road() {
      if (this.road == "") {
        this.checkRoadID = "";
      } else {
        for (var item of this.roadList) {
          if (item.value == this.road) {
            this.checkRoadID = item.prop;
          }
        }
      }
    },
    roadEnd() {
      if (this.roadEnd == "") {
        this.checkEndID = "";
      } else {
        for (var item of this.roadEndList) {
          if (item.value == this.roadEnd) {
            this.checkEndID = item.prop;
          }
        }
      }
    },
    comp() {
      if (this.comp == "") {
        this.checkCompID = "";
      } else {
        for (var item of this.compList) {
          if (this.comp == item.value) {
            this.checkCompID = item.prop;
          }
        }
      }
    },
  },
  mounted() {
    console.log("baoban");
    this.$emit("sendActive", this.activeTag);
    this.checkDate = new Date();
    this.carNumList = this.loadCarNum();
    this.driverList = this.loadDriver();
    this.roadList = this.loadRoad();
    this.roadEndList = this.loadRoadEnd();
    this.compList = this.loadComp();
    this.allList();
  }
};
</script>
<style scoped src="../../assets/css/service/baoban.css">
</style>
